<!-- 选择单据 -->
<template>
  <view class="h-100p">
    <hx-navbar ref="hxnb" :config="config"></hx-navbar>
    <view class="h-88p">
      <mosoweTable @selectPageData="selectPageData" :column="column" :localData="list" dataListKey="content"
      @onGetTdItemChange="onGetTdItemChange" dataTotalKey="totalCount" rowOperationWidth="100" showIndex :tableProps="{
        type: 'selection'  // 用来显示是否展示左侧多选框
      }" @onSortChange="onSortChange" @onSearchChange="onSearchChange">
      <!-- slot="nameDefault"  插槽是根据column 下每个对象下的value值 + 固定值(Default) 进行覆盖渲染-->
    </mosoweTable>
    </view>
    <view class="fixed-btn">
      <u-button text="保存" @click="save()" type="primary" shape="circle"
        color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"></u-button>
    </view>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import mosoweTable from '@/components/mosowe-table/mosowe-table.vue'
import {
  getListCanWriteOffBillsByCustomerId
} from "@/apis/bill/receipt";
import { getListCanWriteOffBillsByCustomerId as getPaymentByCustomerId } from "@/apis/bill/payment-order";
export default {
  components: {
    clIcon,
    mosoweTable
  },
  data() {
    return {
      column: [{
        text: '单据编号',
        value: 'billNo',
        fixed: 'left',
      },
      {
        text: '业务类型',
        value: 'billTypeName',
        width: '100',
      },
      {
        text: '业务日期',
        value: 'businessTime',
        width: '150',
      },
      {
        text: '经手人',
        value: 'handUserName',
        width: '80',
      },
      {
        text: '	原单金额',
        value: 'billAmount',
        width: '80',
      },
      {
        text: '已核销',
        value: 'hasWriteOffAmount',
        width: '80',
      },
      {
        text: '未核销',
        value: 'unWriteOffAmount',
        width: '80',
      },
      ],
      search: null,
      indexList: [],
      config: {
        title: "选择单据",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
      },
      // 颜色列表
      list: [],
      params: {
        data: {},
        page: {
          current: 1,
          size: 10
        }
      },
      id: null,
      type: null,
      pageData: []
    };
  },
  computed: {},
  onLoad(opt) {
    if (opt.type) {
      this.type = opt.type
    }
    if (this.$Route.query.id) {
      this.id = this.$Route.query.id
    }
    this.initData();
  },
  methods: {
    // 获取当前点击的td数据和th行数 data:数据  index：行数
    onGetTdItemChange(obj) {
      console.log('onGetTdItemChange', obj);
    },
    onSortChange(event, obj) {
      console.log('onSortChange', event, obj);
    },
    onSearchChange(obj) {
      console.log('onSearchChange', obj);
    },
    selectPageData(obj) {
      this.pageData = obj[1]
    },
    // 获取数据
    initData() {
      // 1. 查询列表信息
      uni.showLoading({
        title: '加载中'
      })
      const build = {
        data: {
          "comegoId": this.id
        },
        page: {
          current: 1,
          size: 100,
          sort: "",
          order: "desc",
          orders: [
            {
              "column": "business_time",
              "asc": false
            }
          ],
          total: 0,
        },
      };
      // 2是收款单
      if (this.type == 1) {
        getPaymentByCustomerId(build).then((res) => {
          if (!res.flag) return;
          const data = res.data || {};
          this.list = data.records
          uni.hideLoading()
        }).catch(err => {
          uni.hideLoading()
        });
      } else if (this.type == 2) {
        getListCanWriteOffBillsByCustomerId(build).then((res) => {
          if (!res.flag) return;
          const data = res.data || {};
          this.list = data.records
          uni.hideLoading()
        }).catch(err => {
          uni.hideLoading()
        });
      }

    },
    save() {
      uni.$emit("selectDocument", this.pageData)
      uni.navigateBack()
    },
    scrolltolower() { },
  },
  mounted() {
  },

};
</script>

<style lang="scss" scoped>
.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  border: 1px solid #fff;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}

.color-list {
  background-color: #fff;

  .color-item {
    height: 80rpx;
    font-size: 28rpx;
    padding: 0 20rpx;
    border-bottom: 1rpx solid #eee;
    line-height: 80rpx;
  }
}
</style>
